<template>
  <div class="container">
    <!-- 通知和搜索 -->
    <div>
      <div class="van-search">
        <img :src="newlogo" alt="" style="width: 23%; height: 1.3rem" />
        <div class="van-search__content van-search__content--round">
          <div class="van-cell van-cell--borderless van-field">
            <div class="van-field__left-icon" @click="onsearch()">
              <i
                class="van-icon van-icon-search"
                style="height: 1.1rem; color: #686869"
              ></i>
            </div>
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input
                  ref="inpt"
                  v-model="sch"
                  type="search"
                  placeholder="输入地区名称 如：X省或X市"
                  class="van-field__control"
                  @search="onsearch()"
                  @input="jujao()"
                />
              </div>
            </div>
            <div
              class="van-field__left-icon"
              @click="resrch()"
              v-show="wordsly"
            >
              <i
                class=""
                style="
                  height: 1.1rem;
                  color: #686869;
                  font-size: 15px;
                  font-weight: bold;
                "
                >╳</i
              >
            </div>
          </div>
        </div>
        <span @click="redirectTo('/order')" style="margin-left: 2%">
          &nbsp;
          <!-- <van-icon name="cart" size="22" color="#1d5ae8" /> -->
        </span>
      </div>
    </div>
    <!-- in shopInfos.choicenessList -->
    <!-- banner  暂定高230  宽100% -->
    <van-swipe
      :autoplay="3000"
      indicator-color="white"
      class="banner"
      style="background: #f2f1f6; height: 138px"
    >
      <van-swipe-item
        v-for="(banner, index) in shopInfos"
        :key="index"
        style="height: 150px; text-align: center; background: #f2f1f6"
      >
        <!-- <div class="topback"></div>
        <div class="bottomback"></div> -->
        <img
          :src="banner.imageUrl"
          @click="redirectTo(banner.jmpUrl)"
          style="width: 100%; height: 150px; object-fit: contain"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- <van-row
      type="flex"
      justify="space-around"
      align="center"
      style="padding-top: 0.7rem"
    > -->
    <!-- <van-col style="width: 20%">
        <div>
          <van-dropdown-menu style="margin-left: -5px" active-color="#EE3F00">
            <van-dropdown-item
              :title="address"
              class="select_area"
              ref="area_itemct"
            >
              <van-area
                columns-num="2"
                :area-list="areaList"
                @confirm="addConfirmcity"
                @cancel="hideAreaItem"
                :value="area_code"
              />
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
      </van-col> -->

    <!-- <div
        class="search"
        style="width: 95%; height: 1.85rem; border-radius: 20px"
      >
        <p>
          <span>搜索</span>
        </p>
        <p>
          <input type="text" placeholder="搜索装修风格 / 房形" />
        </p>
      </div> -->
    <!-- <van-search
          style="width: 91%; margin: auto; height: 1.7rem"
          v-model="filter_name"
         
          clearable
          shape="round"
          @search="init"
        ></van-search> -->
    <!-- </van-row> -->
    <van-row class="menu-container">
      <van-col span="8">
        <van-dropdown-menu style="margin-left: -5px" active-color="#EE3F00">
          <van-dropdown-item
            :title="localaddress"
            class="select_area"
            ref="area_item"
          >
            <van-area
              columns-num="2"
              :area-list="areaList"
              @confirm="addConfirm"
              @cancel="hideAreaItem"
              :value="area_code"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-col>
      <van-col span="8">
        <van-dropdown-menu style="margin: auto" active-color="#EE3F00">
          <van-dropdown-item
            v-model="skill"
            :options="decorationType"
            @change="changeItemhaus"
          />
        </van-dropdown-menu>
      </van-col>
      <van-col span="8">
        <van-dropdown-menu style="margin-right: -5px" active-color="#EE3F00">
          <van-dropdown-item
            v-model="staff"
            :options="option3"
            @change="changeItembudge"
          />
        </van-dropdown-menu>
      </van-col>
    </van-row>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in shoplist.data" :key="index" :title="item">
          <div
            style="padding-top: 15px"
            @click="routo(`${item.id}`)"
            class="my-li-container"
          >
            <aside>
              <img
                :src="item.icon"
                style="border-radius: 4px"
                height="100px"
                width="100px"
              />
            </aside>
            <ul style="justify-content: space-between">
              <li style="font-size: 14px; flex: 1">
                <b>{{ item.name }}</b>
              </li>
              <li class="detail-container" style="flex: 1">
                <p style="font-size: 12px">
                  <a
                    style="
                      border: 1px solid #0a65fc;
                      padding: 2px;
                      border-radius: 3px;
                    "
                  >
                    <span>{{ item.examples.length }}案例</span></a
                  >
                  <a
                    style="
                      margin-left: 10px;
                      border: 1px solid #0a65fc;
                      padding: 2px;
                      border-radius: 3px;
                    "
                  >
                    <span> {{ item.commentCount }}条评价</span></a
                  >
                </p>
                <!-- <p style="text-align: center"></p> -->
                <p style="padding-top: 2px; text-align: right; width: 40%">
                  <a>
                    <span
                      >{{
                        spacecou[index] == undefined
                          ? '定位中...'
                          : spacecou[index].toFixed(2)
                      }}km
                    </span></a
                  >
                </p>
                <!-- <span class="distance"
                  >km</span>-->
              </li>
              <li style="padding-bottom: 3px">
                <p style="display: flex; margin: 0">
                  <span
                    v-for="(value, item) in item.styleIds.slice(0, 4)"
                    :key="item"
                    :style="item != 0 ? 'margin-left:5px' : null"
                    style="color:white; display: inline-blockwidth:auto;background:#F09032;border-radius:4px;padding:1px 2px;"
                  >
                    {{ value }}</span
                  >
                </p>
              </li>

              <!-- <li class="detail-container">
                <nav v-for="(ite, i) in item.examples" :key="i">
                  <a v-if="i + 1 == item.examples.length">{{ i + 1 }}个案例</a>
                </nav>
              </li> -->
              <li style="display: flex; justify-content: space-between">
                <!-- <p
                  v-for="(itm, index) in item.pictures.slice(0, 2)"
                  :key="index"
                  :style="index == 0 ? 'text-align:left' : 'text-align:right'"
                  style="flex: 1"
                >
                  <img
                    :src="itm"
                    alt=""
                    style="
                      width: 97%;
                      height: 6rem;
                      object-fit: cover;
                      border-radius: 4px;
                    "
                  />
                </p> -->
              </li>
            </ul>
          </div>
          <!-- 小dmo分割线 -->
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '5px 16px 0px 16px',
            }"
          ></van-divider>
        </div>
      </van-list>
    </div>
    <decorationlist ref="sonV" :sentch="popto" />
    <!-- <baidu-map
      @ready="handler"
      ak="2h9wN9GgNpKzrBPmvXFdBtApasaB5cmx"
    ></baidu-map> -->
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  Swipe,
  SwipeItem,
  DropdownMenu,
  DropdownItem,
  List,
  Uploader,
  Popup,
  Area,
  Tag,
  Divider,
  Toast,
} from 'vant';
import _ from 'lodash';
import {
  listProject,
  dicItems,
  getCodeByDistrict,
  getentlist,
  getWxConfig,
  haushalter,
  stiler,
  shoplister,
  cardec,
} from '@/api/api';
import areaList from '@/views/user/module-address-edit/area_all.json';
import wx from 'weixin-js-sdk';
import logo_default from '@/assets/images/logo.jpg';
import newlogo from '@/assets/images/newlogo.png';
import scrollFixed from '@/mixin/scroll-fixed';
import shigao from '@/assets/images/merchant/shigao.png';
import decorationlist from '@/components/decorationlist';

export default {
  name: 'decoration',
  mixins: [scrollFixed],
  data() {
    return {
      sch: '',
      wordsly: false,
      shoplist: {
        pages: null,
        data: [],
        page: 0,
      },
      shopInfos: [],
      newlogo: newlogo,
      userId: -1,
      areaList: areaList,
      localaddress: '服务区域',
      address: '',
      loading: false,
      finished: false,
      logo_default: logo_default,
      page: 0,
      limit: 10,
      sale: false,
      filter_name: '',
      area_code: '',
      skill: -1,
      staff: -1,
      popto: '',
      area: '',
      spacecou: [],
      decorationType: [
        {
          text: '',
          value: -1,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
        {
          text: '',
          value: null,
        },
      ],
      option3: [
        {
          text: '',
          value: -1,
        },
        {
          text: '',
          value: 1,
        },
        {
          text: '',
          value: 2,
        },
        {
          text: '',
          value: 3,
        },
        {
          text: '',
          value: 4,
        },
        {
          text: '',
          value: 5,
        },
        {
          text: '',
          value: 6,
        },
        {
          text: '',
          value: 7,
        },
        {
          text: '',
          value: 8,
        },
      ],

      wkTypeId: 'INFO.WORK.TYPE',
      latitude: '',
      latitude: '',
      budgetIdx: '',
      styleId: '',
      setyle: new Map(),
      provinceCode: '',
      cityCode: '',
      areaCode: '',
      keywords: '',
    };
  },

  created() {
    cardec({}).then((res) => {
      this.shopInfos = res.data.data.list;
      // console.log(this.shopInfos);
    });
    // this.initArea();
    this.initWkType();
  },

  methods: {
    jujao() {
      if (this.sch != '') {
        this.wordsly = true;
      } else {
        this.wordsly = false;
      }
    },
    resrch() {
      this.sch = '';
      this.wordsly = false;
      this.words = this.sch;
      this.page = 0;
      this.shoplist.data = [];
      this.onLoad();
    },
    redirectTo(link) {
      console.log(link);
      this.$router.push({
        path: link,
      });
    },
    routo(id) {
      //  this.$refs.sonV.routo(id);
      // Toast(id);
      this.$router.push({ path: '/renovation/homepage/' + id });
    },
    onsearch() {
      this.words = this.sch;
      let ipt = this.$refs.inpt;
      ipt.blur();
      this.page = 0;
      this.shoplist.data = [];
      this.onLoad();
    },

    // 预算
    changeItembudge(index) {
      if (index == -1) {
        this.budgetIdx = '';
        this.page = 0;
        this.shoplist.data = [];
        this.onLoad();
        return;
      }
      this.budgetIdx = index;
      this.page = 0;
      this.shoplist.data = [];
      this.onLoad();
    },
    // 风格
    changeItemhaus(index) {
      if (index == -1) {
        this.styleId = '';
        this.page = 0;
        this.shoplist.data = [];
        this.onLoad();
        return;
      }
      this.styleId = index;
      this.page = 0;
      this.shoplist.data = [];
      this.onLoad();
    },

    initWkType() {
      // 预算接口
      let that = this;
      haushalter({}).then((res) => {
        if (this.option3[0].text == '') {
          this.option3[0].text = '预算';
        } else {
          this.option3.slice(1, 14);
        }
        for (let ind in res.data.data.list) {
          this.option3[Number(ind) + 1].text = res.data.data.list[ind].budget;
          this.option3[Number(ind) + 1].value = res.data.data.list[ind].id;
        }
        // console.log(this.option3);
      });
      // 风格接口
      stiler({}).then((res) => {
        if (this.decorationType[0].text == '') {
          this.decorationType[0].text = '风格';
        } else {
          this.decorationType.slice(1, 14);
        }
        for (let ind in res.data.data.list) {
          this.decorationType[Number(ind) + 1].text =
            res.data.data.list[ind].name;
          this.decorationType[Number(ind) + 1].value =
            res.data.data.list[ind].id;
        }

        let arr = res.data.data.list;
        arr.forEach((e) => {
          this.setyle.set(e.id, e.name);
        });
      });
      // getentlist({}).then((res) => {
      //   this.shoplist = res.data.data.list;
      // });
    },

    // initArea() {
    //   let area = this.$store.getters.getArea;

    //   if (area.code != null) {
    //     this.area_code = area.code;
    //     this.address = area.city;
    //   }
    // },
    // getHasWkType(wktype_value) {
    //   for (let i in this.decorationType) {
    //     if (wktype_value === this.decorationType[i].value) {
    //       return this.decorationType[i].text;
    //     }
    //   }
    // },

    getDate(item) {
      let time = '——';
      if (item.startDate != undefined && item.endDate != undefined) {
        let s1 = new Date(item.startDate.replace(/-/g, '/'));
        let s2 = new Date(item.endDate.replace(/-/g, '/'));
        var days = s2.getTime() - s1.getTime();
        time = parseInt(days / (1000 * 60 * 60 * 24));
      }
      return time;
    },
    publish() {
      this.$router.push('/info/project-publish/-1');
    },
    itemClick(id) {
      this.$router.push(`/decoration/home?id=${id}`);
    },
    getSrc(item) {
      let image = logo_default;
      if (item.imgUrl != null && item.imgUrl != '') {
        image = item.imgUrl;
      }
      return image;
    },
    addConfirm(value) {
      if (value[0].code == '100000') {
        this.area_code = '';
        this.localaddress = '全国地区';
        this.provinceCode = '';
        this.cityCode = '';
        this.areaCode = '';
        this.page = 0;
        this.onLoad();
        this.show = false;

        this.$refs.area_item.toggle();
        return;
      } else {
        this.localaddress = value[1].name;
        this.provinceCode = value[0].code;
        this.cityCode = value[1].code;
        // this.areaCode = value[2].code;
        this.page = 0;
        this.shoplist.data = [];
        this.onLoad();
      }
      this.show = false;

      this.$refs.area_item.toggle();
    },

    hideAreaItem() {
      this.$refs.area_item.toggle();
    },

    init() {
      this.onLoad();
    },

    onLoad() {
      this.page++;
      shoplister({
        keywords: this.words,
        areaCode: this.areaCode,
        budgetId: this.budgetIdx,
        cityCode: this.cityCode,
        limit: this.limit,
        page: this.page,
        provinceCode: this.provinceCode,
        styleId: this.styleId,
      }).then((res) => {
        let arry = res.data.data.list;
        arry.forEach((e) => {
          let stylist = [];
          e.styleIds.forEach((item) => {
            if (this.setyle.get(Number(item))) {
              stylist.push(this.setyle.get(Number(item)));
            }
          });
          e.styleIds = stylist;
        });

        this.shoplist.data.push(...arry);
        this.finished = res.data.data.page >= res.data.data.pages;
        this.loading = false;
        let loctime = setInterval(() => {
          let loa = res.data.data.list;
          let that = this;
          wx.getLocation({
            type: 'wgs84',
            success: function (res) {
              that.latitude = res.latitude;
              that.longitude = res.longitude;
              loa.forEach((e) => {
                that.getSpace(
                  that.latitude,
                  that.longitude,
                  String(e.longitude),
                  String(e.latitude)
                );
              });
            },
          });
          if (this.spacecou != undefined) {
            clearInterval(loctime);
          }
        }, 1000);
      });
    },

    //获取经纬度直线距离
    getSpace(lat1, lng1, lat2, lng2) {
      if (!(lat1 && lng1 && lat2 && lng2)) {
        return -1;
      } //经纬度不存在返回-1
      // console.log(lat1, lng1, lat2, lng2);
      let radLat1 = (lat1 * Math.PI) / 180.0;
      let radLat2 = (lat2 * Math.PI) / 180.0;
      let a = radLat1 - radLat2;
      let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      // 正玄、平方根、幂、余玄
      let s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      this.spacecou.push(s);
      // console.log(s);
      return s;
      // 单位千米
    },

    strlen(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
  },
  components: {
    decorationlist,
    [Search.name]: Search,
    [SwipeItem.name]: SwipeItem,
    [Swipe.name]: Swipe,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}

.van-search {
  padding: 0.75rem 4%;
}

/deep/ .van-search .van-cell {
  border: 1px solid #1d5ae8 !important;
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}
.van-search,
.van-search__content {
  background: #f2f1f6 !important;
}

/deep/.van-field__control {
  font-size: 14px;
}
.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}
.van-search__content {
  border-radius: 0px !important;
  // height: 1.5rem;
}
// 小图标
.smallpic {
  display: block;
}
.smallpic::after {
  display: inline-block;
  content: '▼';
  margin-left: 0.2rem;
  font-size: 0.5rem;
}
// 搜索框
.search {
  height: 1.85rem;
  p {
    margin: 0;
  }
  p:nth-child(2) {
    width: 80%;
    float: left;
  }
  p:nth-child(1) {
    width: 20%;
    background: orangered;
    border-top-right-radius: 20px;
    color: white;
    font-size: 0.8rem;
    text-align: center;
    border-bottom-right-radius: 20px;
    height: 1.8rem;
    line-height: 1.85rem;
    // padding: 0.5rem;
    float: right;
  }
  input {
    width: 100%;
    height: 1.8rem;
    border: 1px solid orangered;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    padding-left: 0.9rem;
  }
}

/deep/ .van-dropdown-menu {
  box-shadow: 0 0 0 0;

  .van-dropdown-menu__item {
    background: rgb(233, 233, 233);
    // margin-left: 10px;
    // margin-top: 0.5%;
    border-radius: 4px;
    height: 29px;
  }
}

.select_area /deep/ .van-picker__toolbar {
  width: 100%;
  position: absolute;
  bottom: -44px;
}

.select_area /deep/ .van-picker__columns {
  margin-bottom: 44px;
}

.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}

.spanafter::after {
  position: absolute;
  top: 50%;
  right: -1px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}

/deep/.van-dropdown-menu__item {
  padding: 0 10% 0 0;
}

.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}

.container {
  background-color: white;

  .van-row {
    padding: 0.5rem 16px;

    .van-row {
      padding: 0px;
    }
  }
}

.van-divider {
  margin: 0px;
  padding-top: 15px;
}

.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}

.title {
  font-weight: bold;
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;

  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
}

.publish {
  line-height: 40px;
  width: 54px;
  text-align: end;
}

.publish span {
  width: 60px;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 13px;
  padding: 5px 8px;
  color: white;
}

.van-cell {
  padding: 0px;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}

.menu-container {
  display: flex;
  // margin-top: 0.5rem;
  // margin-bottom: 5px;

  .van-col {
    flex: 1 !important;
    padding: 0 5px;
  }
}

/deep/.van-dropdown-menu__bar {
  height: auto;

  .van-dropdown-menu__title::after {
    border-color: transparent transparent rgba(0, 0, 0, 1) rgba(0, 0, 0, 1);
  }
}

.my-li-container {
  display: flex;
  //height: 150px;
  padding: 0px 16px;
  padding-top: 15px;

  > aside {
    position: relative;
  }

  > ul {
    flex: 1;
    padding-left: 10px;
    display: flex;
    flex: 1;
    flex-direction: column;

    > li.tag-container {
      > p:nth-child(1) {
        width: 100%;
        margin: 0;
        margin-top: 1px;
        span:nth-child(1) {
          font-size: 12px;
          padding: 0.1rem;
          background: #2b2726;
          border-radius: 4px;
          color: white;
          display: inline-block;
        }
        span:nth-child(2) {
          color: #8a8893;
          padding-left: 5px;
        }
      }
      p:nth-child(2) {
        width: 100%;
        margin: 0;
        margin-top: 5px;

        span:nth-child(1) {
          font-size: 12px;
          padding: 0.1rem;
          background: #fa7518;
          border-radius: 4px;
          color: white;
          display: inline-block;
        }
        span:nth-child(2) {
          color: #8a8893;
          padding-left: 5px;
        }
      }
    }

    > li.detail-container {
      display: flex;
      width: 100%;
      // flex-direction: row;
      font-size: 13px;
      justify-content: space-between;
      color: #706f75;

      > p {
        // text-align: center;
        margin-bottom: 0;
        margin-top: 0.1px;
        // flex: 1;
        height: auto;
        white-space: normal;
        // overflow: hidden;
        text-overflow: ellipsis;

        > a {
          color: inherit;
        }

        > a:nth-of-type(2) {
          margin: 0 auto;
        }
      }

      > .distance {
        position: absolute;
        font-size: 14px;
        right: -5px;
        position: absolute;
        top: -5px;
      }
    }
  }
}
</style>
